<template>
	<div class="flex justify-center pt-30px pb-30px">
		<div class="w-60% ">
			<p class="text-34px text-#000000 font-bold mb-10px">发布广告</p>
			<p class="text-18px text-#00000 mb-20px">
				<span> {{ stepList[step - 1].id }} /3 </span>
				<span> {{ stepList[step - 1].content }} </span>
			</p>
			<div class="w-100% mb-20px">
				<el-steps style="width: 100%;height:40px;" :active="step">
					<el-step v-for="(item, index) in stepList" :key="index">
					</el-step>
				</el-steps>
			</div>
			<div class="w-180px" v-if="step == 1">
				<div class="flex items-center border border-1px border-solid border-#E5E6EB text-#B5B5B5 rounded-10px p-2px justify-between
				mr-20px">
					<div value="buy"
						:class="{ 'w-100px': true, 'h-32px': true, 'flex': true, 'items-center': true, 'justify-center': true, 'item-after': methods === 'pay', 'cursor-pointer': true }"
						@click="changeMethods('pay')">
						购买
					</div>
					<div value="sell"
						:class="{ 'w-100px': true, 'h-32px': true, 'flex': true, 'items-center': true, 'justify-center': true, 'item-after': methods === 'sell', 'cursor-pointer': true }"
						@click="changeMethods('sell')">
						出售
					</div>
				</div>
			</div>

			<SetPrice :methods="methods" @next="next" v-if="step == 1"></SetPrice>
			<SetPayment :methods="methods" v-if="step == 2" @next="next" @back="next"></SetPayment>
			<SetNotes v-if="step == 3" @back="next" :methods="methods"></SetNotes>
		</div>
	</div>
</template>
<script setup lang="ts">
import SetPrice from './components/SetPrice.vue';
import SetPayment from './components/SetPayment.vue';
import SetNotes from './components/SetNotes.vue';
const stepList = ref<any[]>(
	[
		{
			id: 1,
			content: '设置类型&价格'
		},
		{
			id: 2,
			content: '设置交易数量&支付方式'
		},
		{
			id: 3,
			content: '设置备注及自动回复'
		}
	]
)

const step = ref<1 | 2 | 3>(1)

const next = (val: boolean) => {
	if(step.value > 1 || step.value == 1){
		if(val){
			step.value++;
		}
	}
	if(step.value < 3 || step.value == 3){
		if(!val){
			step.value--;
		}
	}
}
// 选择广告类型
const methods = ref<'pay' | 'sell'>('pay')

const changeMethods = (val: 'pay' | 'sell') => {
	methods.value = val
}
</script>	
<style lang="scss" scoped>
::v-deep .el-step__head {
	display: flex !important;
	align-items: center !important;
}

::v-deep .el-step__line-inner,
::v-deep .el-step.is-horizontal .el-step__line {
	height: 4px;
}

::v-deep .el-step.is-horizontal .el-step__line {
	margin-top: 6px;
}

::v-deep .el-step__line-inner {
	background-color: #114CEE;
}

::v-deep .el-step__icon {
	padding: 16px;
	background-color: #EBEBEB;
	border-color: #EBEBEB;
}

::v-deep .is-finish .el-step__icon {
	background-color: #114CEE;
	border-color: #114CEE;
	color: #fff;
}

.item-after {
	position: relative;
	z-index: 2;
	color: #FFFFFF;

	&::after {
		content: '';
		width: 100%;
		height: 100%;
		border-radius: 8px;
		background-color: #114CEE;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
}
</style>
